import React, { useState, useEffect } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField'
import Button from '@mui/material/Button';
import MQTTService from '../services/MQTTService';
import Conversion from '../utils/Conversion';

const DeviceCard = ({ device }) => {
    const [value, setValue] = useState(device.data.value);
    const [time, setTime] = useState(device.data.time);
    const [inputValue, setInputValue] = useState('');
    
    var reciveTopic = "state/" + device.topic
    var sendTopic = "control/" + device.topic
    
    useEffect(() => {
        const handleMessage = (topic, message) => {
            if (topic === reciveTopic) {
                setValue(message.toString());
                setTime(Date.now());
            }
        };

        MQTTService.connect().then(() => {
            MQTTService.client.on('message', handleMessage);
        });

        return () => {
            MQTTService.client.off('message', handleMessage);
            MQTTService.client.end();
        };
    }, [device]);

    const handleSendButtonClick = () => {
        MQTTService.sendMessage(sendTopic, inputValue.toString());
        setInputValue('');
    };

    return (
        <Card className='DriverCard' style={{margin:10}}>
            <CardContent className='DriverCard-Content'>
                {/* 昵称 */}
                <Typography variant="h5" color="textSecondary">
                    {device.nick}
                </Typography>
                {/* 数据 */}
                {value === null ? (
                    <Typography variant="h5" style={{marginTop:6}}>加载中...</Typography>
                ) : (
                    <Typography variant="h5" style={{marginTop:6}}>
                        {value}{device.unit}
                    </Typography>
                )}
                {/* 推送 */}
                <Typography style={{ display: 'flex', alignItems: 'flex-end'}}>
                    <TextField 
                        label="请输入推送内容" 
                        variant="standard" 
                        style={{ flex: '8', marginRight: 8 }}
                        value={inputValue}
                        onChange={(e) => setInputValue(e.target.value)}
                    />
                    <Button 
                        variant="contained" 
                        style={{ flex: '2' }}  
                        onClick={handleSendButtonClick}
                    >
                        推送
                    </Button> 
                </Typography>
                {/* 主题 */}
                <Typography variant="subtitle1" color="textSecondary" style={{marginTop:6}}>
                    主题: {device.topic}
                </Typography>
                {/* 时间 */}
                <Typography variant='subtitle2' color="textSecondary">
                    更新于: {Conversion.getDataFromStamp(time)}
                </Typography>

            </CardContent>
        </Card>
    );
};

export default DeviceCard;
